<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">数据采集</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">财务数据</el-breadcrumb-item>
          <el-breadcrumb-item>国标数据采集</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <!--国标数据采集-->
      <div class="audit-content financialDataCJ" v-if="financialData">
        <div class="centent-title">
          <span>国标数据采集</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <div class="financial-data-prompt">
            <p>请选择一个会计核算软件数据接口国家标准，然后指定数据文件或所在的路径，点击导入后，系统会将会计核算数据采集到现场审计实施系统中。</p>
          </div>
          <div class="financial-data-select">
            <div class="financial-data-dv">
              <label for="standard">选择国家标准：</label>
              <select id="standard">
                <option value="volvo">GB/T19581-2004 企事业单位</option>
                <option value="saab">GB/T19581-2010 企事业单位</option>
                <option value="opel">GB/T19581-2010 行政</option>
              </select>
            </div>
            <div class="financial-data-dv">
              <label for="fileType">数据源文件类型：</label>
              <select id="fileType">
                <option value="volvo">文本文件</option>
                <option value="saab">Excel</option>
                <option value="opel">Xml</option>
              </select>
            </div>
            <div class="financial-data-dv">
              <label for="male">请选择数据源：</label>
              <a href="javascript:;" class="financial-data-file">
                <span>{{ fileName }}</span>
                <input type="file" @change="tirggerFile" ref="file" title name value>
              </a>
            </div>
          </div>
          <div class="financial-data-btn clearfix">
            <button class="btn fl btn-primary" @click="centerDialogVisible = true">导入</button>
            <button class="btn fl financial-data-whiBtn" @click="routElectronic">取消</button>
          </div>
        </div>
      </div>

      <!--国标数据采集-检核中-->
      <div class="audit-content nationalStandardDataCheckJH" v-if="nationalStandardDataCheck">
        <div class="centent-title">
          <span>国标数据采集-检核中</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <div class="checkInProgress" v-if="progressBar">
            <!--进度条-->
            <el-progress :percentage="50" :format="format" :stroke-width="16"></el-progress>
          </div>
          <div class="completeTheWizard">
            <p class="headlineP">完成向导</p>
            <div>检查你的选项，完成向导</div>
          </div>
          <div class="theWizardNext">
            <p class="headlineP">点击完成将执行下列操作</p>
            <div>
              <p>共1项任务：</p>
              <ul>
                <li>1. 将源表：'XXXXXX'中的行复制到目标表：'[XXXXXXX]'</li>
              </ul>
              <p class="theWizardNextNotice">注意：将创建新的目标表（如果目标表已存在，将删除目标表重新创建新表）。</p>
            </div>
          </div>
          <div class="checkInBut clearfix">
            <button class="btn fl btn-primary">上一步</button>
            <button class="btn fl btn-primary">采集</button>
            <button class="btn fl btn-default">取消</button>
          </div>
          <div class="checkTheReport clearfix" v-if="checkTheReportEnd">
            <button class="btn fl btn-default">检核规则信息报告</button>
            <button class="btn fl btn-default">不符合检核规则数据报告</button>
          </div>
        </div>
      </div>

      <!--电子数据管理-->
      <div class="audit-content electronicDataGL" v-if="electronicData">
        <div class="centent-title">
          <span>电子数据管理</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <div class="clearfix electronicBut">
            <button class="btn fl btn-primary" @click="newKuaijiSJ">新建会计数据</button>
            <button class="btn fl btn-primary" @click="amendKuaijiSJ">修改</button>
            <button
              class="btn fl btn-primary"
              @click="deleteElectronicData"
              :disabled="multipleSelection.length === 0"
            >删除</button>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="35"></el-table-column>
            <el-table-column label="序号" width="70">
              <template slot-scope="scope">{{ scope.$index +1 }}</template>
            </el-table-column>
            <el-table-column prop="name" label="会计数据名称" width="200"></el-table-column>
            <el-table-column prop="address" label="单位名称" width="350"></el-table-column>
            <el-table-column prop="year" label="会计年度" show-overflow-tooltip></el-table-column>
            <el-table-column prop="hymc" label="行业名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="kjsjsm" label="会计数据说明" show-overflow-tooltip></el-table-column>
          </el-table>
          <ul>
            <li>
              当前采集数据年度为：
              <span>2004</span>请新建或选择相应年度会计数据
            </li>
            <li>当前会计数据： 2004年北京某化工有限公司的北京某化工有限公司账套（企业）</li>
            <li>当前项目所在磁盘剩余量：179.42GB</li>
          </ul>
        </div>
      </div>
    </div>

    <!--弹窗-->
    <div class="centerDialogVisibleTC">
      <el-dialog title="会计核算标准接口数据采集" :visible.sync="centerDialogVisible" width="44.5%" center>
        <span style="color: #333333;">正在采集数据：</span>
        <el-table :data="tableData" stripe style="width: 100%" height="250">
          <el-table-column prop="date" label="名称"></el-table-column>
          <el-table-column prop="name" label="状态"></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer clearfix">
          <el-button class="btn fl btn-primary" @click="centerDialogVisible = false">上一步</el-button>
          <el-button class="btn fl btn-primary" @click="centerDialogVisible = false">导入</el-button>
          <el-button class="btn fl" disabled>取消</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="accountingDataTC">
      <el-dialog :title="accountingDataTitle" :visible.sync="accountingData" width="44.5%" center>
        <ul>
          <li>
            <p>数据名称</p>
            <el-input v-model="dataName" placeholder="请输入内容"></el-input>
          </li>
          <li>
            <p>单位名称</p>
            <el-input v-model="entityName" placeholder="请输入内容"></el-input>
          </li>
          <li>
            <p>会计年度</p>
            <el-select v-model="accountIngYear" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <p>选择行业</p>
            <el-select v-model="industry" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <p>会计数据说明</p>
            <el-input type="textarea" :rows="2" v-model="accountingDataSM" placeholder="请输入内容"></el-input>
          </li>
        </ul>
        <span slot="footer" class="dialog-footer clearfix">
          <el-button class="btn fl btn-primary" @click="accountingData = false">确认</el-button>
          <el-button class="btn fl" @click="accountingData = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      financialData: true, //国标数据采集页面标志
      electronicData: false, //电子数据管理页面标志
      nationalStandardDataCheck: false, //国标数据采集-检核中页面标志
      centerDialogVisible: false, //弹窗-会计核算标准接口数据采集
      accountingData: false, //弹窗-新建会计数据信息
      progressBar: false, //进度条
      checkTheReportEnd: false, //检核规则报告
      fileName: "请选择文件",
      accountingDataTitle: "新建会计数据信息", //电子数据管理弹窗标题
      dataName: "", //数据名称
      entityName: "", //单位名称
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      accountIngYear: "", //会计年度
      industry: "", //选择行业
      accountingDataSM: "", //会计数据说明
      tableData: [], //电子数据管理table表格
      multipleSelection: [] //被选中的数据
    };
  },
  created() {
    /*this.$axios.get("url","参数").then((res)=>{
        console.log("参数："+res)
      }).catch()*/
    // this.$axios.get('/FinancialData/tableData').then(res=>{
    //   this.tableData = res.data.tableData;
    //   console.log(this.tableData)
    // })
    /*this.$axios.post('http://128.64.206.110.7111/tabdetailsquery/queryByTableName',{
        tableName:'PT_USER'
      }).then(res=>{
        console.log(res)
      })*/
  },
  methods: {
    tirggerFile() {
      //console.log(this.$refs.file.files)
      this.fileName = this.$refs.file.files[0].name;
    },
    routElectronic() {
      //采集 ---> 管理
      this.financialData = false;
      this.electronicData = true;
    },
    format(percentage) {
      //进度条
      return percentage === 100 ? "满" : "检核中...";
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("数组长度：" + this.multipleSelection.length);
    },
    deleteElectronicData() {
      //电子数据管理-删除
      let _this = this;
      let tableDataBox = _this.tableData;
      let arrBox = this.multipleSelection;
      for (let i = 0; i < tableDataBox.length; i++) {
        for (let j = 0; j < arrBox.length; j++) {
          if (arrBox[j].date == tableDataBox[i].date) {
            tableDataBox.splice(i, 1);
          }
        }
      }
    },
    newKuaijiSJ() {
      //电子数据管理-新建会计数据点击事件
      this.accountingDataTitle = "新建会计数据信息";
      this.accountingData = true;
      if (this.tableData.length > 0) {
        this.dataName = this.tableData[0].name;
        this.entityName = this.tableData[0].address;
        this.accountIngYear = this.tableData[0].year;
        this.industry = this.tableData[0].hymc;
        this.accountingDataSM = this.tableData[0].kjsjsm;
      }
    },
    amendKuaijiSJ() {
      //电子数据管理-修改会计数据点击事件
      this.accountingDataTitle = "修改会计数据信息";
      this.accountingData = true;
    },
    addtableData() {
      //电子数据管理-新建会计数据弹框确认按钮
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  /*国标数据采集*/
  .financialDataCJ {
    .centent-inner {
      padding: 0 20px 20px 20px;
      .financial-data-prompt {
        width: 100%;
        height: 32px;
        margin: 20px 0;
        background: #fcf8e3;
        border: 1px solid #faf2cc;
        border-radius: 4px;
        p {
          line-height: 34px;
          font-size: 14px;
          color: #8a6d3b;
          margin: 0 0 0 3.5%;
        }
      }
      .financial-data-select {
        width: 100%;
        .financial-data-dv {
          margin-bottom: 46px;
          label {
            display: inline-block;
            width: 11%;
            text-align: right;
            padding-right: 1%;
            font-size: 14px;
          }
          select,
          .financial-data-file {
            width: 45%;
            height: 32px;
            background: #ffffff;
            border: 1px solid #d2d2d2;
            border-radius: 5px;
            padding: 6px 0 6px 1%;
            font-size: 14px;
            color: #333333;
            box-sizing: border-box;
          }
          select {
            option {
              height: 100%;
            }
          }
          .financial-data-file {
            display: inline-block;
            padding: 0 0 0 1%;
            line-height: 32px;
            position: relative;
            input {
              width: 100%;
              height: 100%;
              opacity: 0;
              position: absolute;
              top: 0;
              left: 0;
              cursor: pointer;
            }
          }
        }
      }
      .financial-data-btn {
        width: 100%;
        padding-left: 12%;
        box-sizing: border-box;
        button {
          padding: 12px 30px;
          margin-right: 1.5%;
          font-size: 20px;
        }
        .financial-data-whiBtn {
          color: #6c8ab6;
        }
      }
    }
  }

  /*国标数据采集-检核中*/
  .nationalStandardDataCheckJH {
    .centent-inner {
      padding: 0 20px 20px 20px;
      .headlineP {
        height: 40px;
        line-height: 40px;
        color: #333333;
        background-color: #eceef2;
        padding: 0 20px;
        border-radius: 6px 6px 0 0;
      }
      .checkInProgress {
        /*进度条*/
        width: 630px;
        height: 16px;
        margin-top: 25px;
        /deep/.el-progress-bar {
          width: 80%;
          padding-right: 0;
          margin-right: 0;
          .el-progress-bar__inner {
            background-color: #6c8ab6;
          }
        }
        /deep/.el-progress__text {
          color: #6c8ab6;
        }
      }
      .completeTheWizard {
        /*完成向导*/
        width: 100%;
        border: 1px solid #d2d2d2;
        border-radius: 6px;
        margin-top: 20px;
        div {
          height: 50px;
          padding: 0 20px;
          margin-top: 10px;
          color: #666666;
        }
      }
      .theWizardNext {
        /*点击完成将执行下列操作*/
        width: 100%;
        border: 1px solid #d2d2d2;
        border-radius: 6px;
        margin-top: 20px;
        div {
          height: 164px;
          padding: 0 20px;
          margin-top: 10px;
          p {
            color: #666666;
          }
          ul {
            li {
              color: #666666;
            }
          }
          .theWizardNextNotice {
            margin-top: 30px;
          }
        }
      }
      .checkInBut {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        button {
          width: 75px;
          height: 37px;
          margin-right: 20px;
        }
      }
      .checkTheReport {
        /*检核报告*/
        margin-top: 40px;
        button {
          height: 35px;
          margin-right: 20px;
        }
      }
    }
  }

  /*电子数据管理*/
  .electronicDataGL {
    .centent-inner {
      padding: 0 20px 20px 20px;
      .electronicBut {
        margin: 20px 0;
        button {
          padding: 8px 20px;
          margin-right: 20px;
        }
      }
      /deep/.el-table {
        border: 1px solid #eceef2;
        border-radius: 4px;
        thead {
          font-size: 14px;
          color: #333333;
          background-color: #eceef2;
          th,
          tr {
            background-color: #eceef2;
          }
        }
        table {
          .el-checkbox__input.is-indeterminate,
          .el-checkbox__input.is-checked {
            .el-checkbox__inner {
              background-color: #6c8ab6;
              border-color: #6c8ab6;
            }
          }
          .el-checkbox__input {
            .el-checkbox__inner:hover {
              border-color: #6c8ab6;
            }
          }
        }
      }
      ul {
        margin-top: 20px;
        li {
          color: #666666;
          margin-bottom: 3px;
          font-size: 14px;
          span {
            margin-right: 30px;
          }
        }
      }
    }
  }
}

/deep/.el-dialog__title {
  font-size: 20px;
  color: #333333;
}

/*弹窗-会计核算标准接口数据采集*/
.centerDialogVisibleTC {
  /deep/.el-dialog__body {
    padding: 25px 50px 30px;
    .el-table {
      border: 1px solid #eceef2;
      border-radius: 4px;
      margin-top: 15px;
      td,
      th {
        padding: 9px 20px;
      }
      thead {
        font-size: 14px;
        color: #333333;
        background-color: #eceef2;
        th,
        tr {
          background-color: #eceef2;
          text-align: right;
        }
        th:first-child,
        tr:first-child {
          text-align: left;
        }
      }
      tbody {
        tr,
        td {
          text-align: right;
        }
        tr:first-child,
        td:first-child {
          text-align: left;
        }
      }
    }
  }
  /deep/.el-button + .el-button {
    margin-left: 11%;
  }
}

/*弹窗-新建会计数据信息*/
.accountingDataTC {
  /deep/.el-dialog__body {
    padding: 25px 50px 30px;
    ul {
      li {
        p {
          margin: 20px 0 10px 0;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  /deep/.el-dialog__footer {
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
  }
}

/*弹框-button按钮*/
/deep/.el-dialog__footer {
  padding: 10px 50px 20px;
  .dialog-footer {
    width: 100%;
    button {
      width: 26%;
      padding: 18px 0;
      font-size: 20px;
    }
    button:last-child {
      color: #999999;
      background: #ffffff;
      border: 1px solid #cccccc;
    }
    button:last-child:focus,
    button:last-child:hover {
      color: #999999;
      background: #ffffff;
      border: 1px solid #cccccc;
    }
    button:focus,
    button:hover {
      color: #ffffff;
      border-color: #6c8ab6;
      background-color: #6c8ab6;
    }
  }
}
</style>